import echarts from 'echarts'
import _ from 'lodash'
// 柱状图和折线图

// options.title 头部对象，写法与echarts一样，默认字体是14px颜色是白色left是0，top 0
// options.legend 图例的配资，写法与echarts一样
// options.xAxis X轴配置，写法和echarts一样
// options.axis.xAxisNameLength X抽字数长度
// options.axis.xAxisConversion x坐标轴转化单位 默认是没有
// options.axis.yAxisNameLength Y抽字数长度
// axis.xAxisDataType： 1 代表X轴坐标是近一年，也就是说月份开始是当前月 ,2的时候，代码1 -12个月顺序排列
// options.axis.yAxisConversion y坐标轴转化单位 默认是没有
// options.tooltipsConfig.tipsColor 提示内容数据的字体颜色数组，安装传进来的顺序显示颜色顺序
// options.tooltipsConfig.isNearlyYear 是否是近一年的月份排序,领导视窗首页的时候，isNearlyYear这个必须为true
// options.tooltipsConfig.symbol 提示数据后面的符号
// options.tooltipsConfig.isNamePreposition 坐标轴名字前置，当为true的时候。tipsMessage在坐标名前，isNearlyYear当出现这个的时候，
// params[i].seriesName 只能是后置
// options.tooltipsConfig.tipsMessage 提示文字，会和seriesName的位置替换，根据isNamePreposition来判断
// options.seriesData[i].isBar 是否是柱状图，默认是折线图
// options.seriesData[i].barColor 柱状图颜色，如需要渐变色，则需要传数组[上面颜色，底下颜色]
// options.config.barWidth 柱状图宽度 默认是15
// options.config.isBarRadius 柱状图的圆角，默认是false，当需要的时候，需增加参数options.barRadius
// options.seriesData[i].colorIndex 当此属性存在的时候，优先考录使用内置的颜色， 默认的顺序是 【蓝，红，黄】
// options.seriesData[i].yAxisIndex 选取的坐标Y轴坐标系，默认是0
// options.seriesData[i].data
// options.seriesData[i].areaColor 折线图填充颜色，如需要渐变色，则需要传数组[上面颜色，底下颜色]
// options.seriesData[i].smooth 折线是是否平滑显示
// options.seriesData[i].symbol 折线的标注点形状 默认是circle
// options.seriesData[i].symbolSize 折线标注点的大小默认是5
// options.seriesData[i].lineWidth 折线线宽 默认是1
// options.seriesData[i].lineColor 折线颜色 默认#2e92cb
// options.seriesData[i].itemColor 折线点的底色 默认白色
// options.seriesData[i].itemBorderColor 折线点的变宽颜色 默认、#2e92cb
// options.seriesData[i].itemWidth 折线宽的颜色
export function barLine (options) {
  options.tooltipsConfig.tipsMessage = options.tooltipsConfig.tipsMessage ? options.tooltipsConfig.tipsMessage : ''
  options.tooltipsConfig.symbol = options.tooltipsConfig.symbol ? options.tooltipsConfig.symbol : ''
  options.tooltipsConfig.tipsColor = options.tooltipsConfig.tipsColor ? options.tooltipsConfig.tipsColor : ['#2e92cb', '#b60d81', '#f29f46', '#00C272']
  const barColorArr = [
    {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(88, 180, 223, 1)' },
          { offset: 1, color: 'rgba(62, 42, 211, 1)' }]),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      }
    },
    {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(253, 99, 208, 1)' },
          { offset: 1, color: 'rgba(143, 12, 105, 1)' }]),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      }
    },
    {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f29f46' },
          { offset: 1, color: '#744312' }]),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      }
    },
    {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#00C272' },
          { offset: 1, color: '#017A48' }]),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      }
    }
  ]
  const lineStyle = [
    {
      normal: {
        color: 'rgb(28, 167, 225)',
        width: 1
      }
    },
    {
      normal: {
        color: 'rgb(230, 18, 169)',
        width: 1
      }
    },
    {
      normal: {
        color: 'rgb(227, 158, 80)',
        width: 1
      }
    }
  ]
  const itemStyle = [
    {
      normal: {
        color: 'rgb(28, 167, 225)',
        borderColor: 'rgba(28, 167, 225, 0.27)',
        borderWidth: 6
      }
    },
    {
      normal: {
        color: 'rgb(230, 18, 169)',
        borderColor: 'rgba(230, 18, 169, 0.27)',
        borderWidth: 6
      }
    },
    {
      normal: {
        color: 'rgb(227, 158, 80)',
        borderColor: 'rgba(227, 158, 80, 0.27)',
        borderWidth: 6
      }
    }
  ]
  const areaStyle = [
    {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(8, 102, 190, 0.9)' },
          { offset: 1, color: 'rgba(8, 102, 190, 0)' }], false),
        shadowColor: 'rgba(8, 102, 190, 0.1)',
        shadowBlur: 5
      }
    },
    {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(230, 18, 169, 0.9)' },
          { offset: 1, color: 'rgba(230, 18, 169, 0)' }], false),
        shadowColor: 'rgba(230, 18, 169, 0.1)',
        shadowBlur: 5
      }
    },
    {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(155, 110, 75, 0.9)' },
          { offset: 1, color: 'rgba(155, 110, 75, 0)' }], false),
        shadowColor: 'rgba(155, 110, 75, 0.1)',
        shadowBlur: 5
      }
    }
  ]
  let splitLineColor = '#07356f'
  let labelColor = '#7aabe7'
  let axisLineColor = '#04427b'
  if (options.config === undefined) {
    options.config = {}
  }
  const defaultTitle = {
    text: '',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 12,
      color: '#fff'
    },
    left: 10,
    top: 0
  }
  const defaultLegend = {
    top: 5,
    left: 0,
    align: 'left',
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    padding: [5, 10, 5, 0],
    textStyle: {
      color: '#324057',
      padding: [0, 0, 0, 0]
    },
    data: []
  }
  const defaultXAxis = {
    type: 'category',
    data: [],
    splitLine: {
      show: false,
      interval: 'auto', // 是否所以的分隔线都显示出来
      lineStyle: {
        color: splitLineColor,
        type: 'dashed',
        opacity: 1,
        width: 1 // 数字或者 '1px'
      }
    },
    axisTick: {
      show: false,
      alignWithLabel: false, // 坐标刻度是否居中对齐
      interval: 'auto', // 是否所以坐标刻度线显示出来
      inside: false, // 刻度线内显示还是外显示
      length: 5, // 刻度线长度
      lineStyle: {
        color: axisLineColor,
        type: 'dashed',
        opacity: 1,
        width: 1 // 数字或者 '1px'
      }
    },
    axisLabel: {
      interval: 'auto', // 是否所以坐标刻度线显示出来
      inside: false, // 刻度线内显示还是外显示
      rotate: 0, // 角度
      textStyle: {
        color: labelColor
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: axisLineColor,
        type: 'solid',
        opacity: 1,
        width: 1 // 数字或者 '1px'
      }
    }
  }
  const defaultYAxis = {
    type: 'value',
    splitNumber: 5,
    minInterval: 10,
    splitLine: {
      show: true,
      interval: 'auto', // 是否所以的分隔线都显示出来
      lineStyle: {
        color: splitLineColor,
        type: 'dashed',
        opacity: 1,
        width: 1 // 数字或者 '1px'
      }
    },
    axisTick: {
      show: true,
      alignWithLabel: false, // 坐标刻度是否居中对齐
      interval: 'auto', // 是否所以坐标刻度线显示出来
      inside: false, // 刻度线内显示还是外显示
      length: 5, // 刻度线长度
      lineStyle: {
        color: axisLineColor,
        type: 'dashed',
        opacity: 1,
        width: 1 // 数字或者 '1px'
      }
    },
    axisLabel: {
      interval: 'auto', // 是否所以坐标刻度线显示出来
      inside: false, // 刻度线内显示还是外显示
      rotate: 0, // 角度
      textStyle: {
        color: labelColor
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: axisLineColor,
        type: 'solid',
        opacity: 1,
        width: 1 // 数字或者 '1px'
      }
    }
  }
  const defaultDataZoom = {
    show: false,
    type: 'slider', // 数据区域缩放是内置还是外置 默认外置
    startValue: 0, // 数据区域缩放开始位置
    endValue: 11, // 数据区域缩放结束位置
    minSpan: null, // 数据区域显示最小值
    maxSpan: null, // 数据区域显示最大值
    minValueSpan: null, // 数据区域显示最小值
    maxValueSpan: null, // 数据区域显示最大值
    rangeMode: ['percent', 'percent'],
    zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小
    showDataShadow: false, // 关闭走势的阴影
    handleSize: '100%', // 控制手柄的大小
    handleStyle: {
      color: 'transparent'
    },
    textStyle: {
      color: 'transparent'
    },
    width: '20%',
    height: 16,
    left: 'auto',
    top: 'auto',
    bottom: 'auto',
    right: 'auto',
    borderColor: '#0f72e3', // 组件边框
    backgroundColor: 'transparent', // 组件的背景颜色
    fillerColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#145aae' },
      { offset: 0.5, color: '#162b7e' },
      { offset: 1, color: '#145aae' }]), // 选中范围的填充颜色
    orient: 'horizontal' // 决定数据区域的布局方式是横还是竖vertical， 默认是水平水平方向
  }
  const defaultGrid = {
    left: 10,
    right: 10,
    bottom: 10,
    top: 30,
    containLabel: true
  }
  const defaultTooltip = {
    trigger: 'axis',
    show: true,
    alwaysShowContent: false,
    triggerOn: 'mousemove|click',
    axisPointer: {
      type: 'shadow',
      lineStyle: {
        color: '#fff',
        type: 'dashed',
        width: 1
      },
      shadowStyle: {
        color: 'rgba(51, 168, 238, 0.1)'
      }
    },
    position: function (pos, params, dom, rect, size) {
      if (options.callback) {
        options.callback(params)
        dom.innerHTML = ''
        dom.style.backgroundColor = 'transparent'
      } else {
        let year = new Date().getFullYear()
        let month = new Date().getMonth() + 1
        let lefts
        let tops
        let spotDom = ''
        let messageDom
        let divDom
        let divList = ''
        let symbol = ''
        if (params instanceof Array) {
          for (let i = 0; i < params.length; i++) {
            symbol = Array.isArray(options.tooltipsConfig.symbol) ? options.tooltipsConfig.symbol[i] : options.tooltipsConfig.symbol
            if (params.length > 1) {
              spotDom = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + options.tooltipsConfig.tipsColor[i] + ';"></span>'
            } else {
              spotDom = ''
            }
            if (options.tooltipsConfig.isNearlyYear) {
              if (parseInt(params[0].axisValue.replace('月', '')) >= month) {
                messageDom = '<span>' + (year - 1) + '年' + params[0].axisValue + params[i].seriesName + ': <span style="color: ' + options.tooltipsConfig.tipsColor[i] + '">' + params[i].value + symbol + '</span></span>'
              } else {
                messageDom = '<span>' + year + '年' + params[0].axisValue + params[i].seriesName + ': <span style="color: ' + options.tooltipsConfig.tipsColor[i] + '">' + params[i].value + symbol + '</span></span>'
              }
            } else {
              if (options.tooltipsConfig.isNamePreposition) {
                messageDom = '<span>' + options.tooltipsConfig.tipsMessage + params[i].axisValue + params[i].seriesName + ': <span style="color:' + options.tooltipsConfig.tipsColor[i] + '">' + params[i].value + symbol + '</span></span>'
              } else {
                messageDom = '<span>' + params[i].seriesName + params[i].axisValue + options.tooltipsConfig.tipsMessage + ': <span style="color:' + options.tooltipsConfig.tipsColor[i] + '">' + params[i].value + symbol + '</span></span>'
              }
            }
            divDom = '<div style="width: 100%; box-sizing: border-box;text-align: left;">' + spotDom + messageDom + '</div>'
            divList += divDom
          }
        } else {
          if (options.tooltipsConfig.isNearlyYear) {
            if (parseInt(params[0].axisValue.replace('月', '')) >= month) {
              messageDom = '<span style="display: block; width: 100%; box-sizing: border-box;text-align: left;">' + (year - 1) + '年' + params.name + params.seriesName + ': <span style="color: ' + options.tooltipsConfig.tipsColor[0] + '">' + params.value + symbol + '</span></span>'
            } else {
              messageDom = '<span style="display: block; width: 100%; box-sizing: border-box;text-align: left;">' + year + '年' + params.name + params.seriesName + ': <span style="color: ' + options.tooltipsConfig.tipsColor[0] + '">' + params.value + symbol + '</span></span>'
            }
          } else {
            if (options.tooltipsConfig.isNamePreposition) {
              messageDom = '<span style="display: block; width: 100%; box-sizing: border-box;text-align: left;">' + options.tooltipsConfig.tipsMessage + params.name + params.seriesName + ': <span style="color:' + options.tooltipsConfig.tipsColor[0] + '">' + params.value + symbol + '</span></span>'
            } else {
              messageDom = '<span style="display: block; width: 100%; box-sizing: border-box;text-align: left;">' + params.seriesName + params.name + options.tooltipsConfig.tipsMessage + ': <span style="color:' + options.tooltipsConfig.tipsColor[0] + '">' + params.value + symbol + '</span></span>'
            }
          }
          divList = messageDom
        }
        dom.innerHTML = divList
        dom.style.border = '1px solid #1072e2'
        dom.style.backgroundColor = 'rgba(7, 23, 62, 0.8)'
        dom.style.padding = '8px 12px'
        if (pos[0] + dom.offsetWidth > size.viewSize[0]) {
          lefts = size.viewSize[0] - dom.offsetWidth
          if (lefts < 0) {
            lefts = 0
          }
        } else {
          lefts = pos[0]
        }
        if (pos[1] + dom.offsetHeight > size.viewSize[1]) {
          tops = size.viewSize[1] - dom.offsetHeight
        } else {
          tops = pos[1]
        }
        return { left: lefts, top: tops }
      }
    }
  }
  if (options.axis === undefined) {
    options.axis = {}
  }
  let title = _.cloneDeep(defaultTitle)
  mergeField(options.title, title)
  let legend = _.cloneDeep(defaultLegend)
  mergeField(options.legend, legend)
  let xAxis = _.cloneDeep(defaultXAxis)
  let xAxisFormatter
  if (options.axis.xAxisNameLength) {
    xAxisFormatter = function (value) {
      return changeShowLength(value, options.axis.xAxisNameLength, options.axis.xAxisNameLengthSymbol)
    }
  } else {
    if (options.axis.xAxisConversion) {
      xAxisFormatter = function (formatter) {
        return conversion(formatter, options.axis.xAxisConversion)
      }
    } else {
      xAxisFormatter = function (value) {
        return value
      }
    }
  }
  xAxis.axisLabel.formatter = xAxisFormatter
  mergeField(options.xAxis, xAxis)
  if (options.axis.xAxisDataType === 1) {
    if (xAxis.data.length === 0) {
      let newMonth = new Date().getMonth() + 1
      let xAxisData1 = []
      let xAxisData2 = []
      for (let i = 1; i < 13; i++) {
        if (i >= newMonth) {
          xAxisData1.push(i + '月')
        } else {
          xAxisData2.push(i + '月')
        }
      }
      xAxis.data = [...xAxisData1, ...xAxisData2]
    }
  } else if (options.axis.xAxisDataType === 2) {
    if (xAxis.data.length === 0) {
      let data = []
      for (let i = 1; i < 13; i++) {
        data.push(i + '月')
      }
      xAxis.data = data
    }
  }
  if (options.axis.xAxisLabelInterval) {
    xAxis.axisLabel.interval = options.axis.xAxisLabelInterval
  }
  let yAxis = []
  let yAxisObj
  let formatter
  if (options.yAxis instanceof Array) {
    options.yAxis.forEach(function (item, index) {
      yAxisObj = _.cloneDeep(defaultYAxis)
      mergeField(item, yAxisObj)
      yAxis.push(yAxisObj)
      let yAxisNameLength
      let yAxisConversion
      if (options.axis.yAxisNameLength) {
        if (options.axis.yAxisNameLength instanceof Array) {
          if (options.axis.yAxisNameLength[index] !== undefined) {
            yAxisNameLength = options.axis.yAxisNameLength[index]
          }
        } else {
          yAxisNameLength = options.axis.yAxisNameLength
        }
        formatter = function (value) {
          return changeShowLength(value, yAxisNameLength)
        }
      } else {
        if (options.axis.yAxisConversion) {
          if (options.axis.yAxisConversion instanceof Array) {
            if (options.axis.yAxisConversion[index] !== undefined) {
              yAxisConversion = options.axis.yAxisConversion[index]
            } else {
              yAxisConversion = options.axis.yAxisConversion
            }
            formatter = function (value) {
              return conversion(value, yAxisConversion)
            }
          }
        } else {
          formatter = function (value) {
            return value
          }
        }
      }
      if (yAxis[index].axisLabel === undefined || yAxis[index].axisLabel.formatter === undefined) {
        yAxis[index].axisLabel.formatter = formatter
      }
    })
  } else {
    yAxisObj = _.cloneDeep(defaultYAxis)
    mergeField(options.yAxis, yAxisObj)
    yAxis.push(yAxisObj)
    if (options.axis.yAxisNameLength) {
      formatter = function (value) {
        return changeShowLength(value, options.axis.yAxisNameLength)
      }
    } else {
      if (options.axis.yAxisConversion) {
        formatter = function (value) {
          return conversion(value, options.axis.yAxisConversion)
        }
      } else {
        formatter = function (value) {
          return value
        }
      }
    }
    if (yAxis[0].axisLabel === undefined || yAxis[0].axisLabel.formatter === undefined) {
      yAxis[0].axisLabel.formatter = formatter
    }
  }
  let dataZoom = _.cloneDeep(defaultDataZoom)
  mergeField(options.dataZoom, dataZoom)
  let grid = _.cloneDeep(defaultGrid)
  mergeField(options.grid, grid)
  let tooltip = _.cloneDeep(defaultTooltip)
  mergeField(options.tooltip, tooltip)
  let seriesArr = []
  options.seriesData.forEach(function (item, i) {
    let chart
    // BarColor柱状图颜色，当传入来的是数组的时候，渐变色，
    let BarColor
    let areaColor
    let itemColor
    let lineColor
    // 如果是柱状图,默认是折线图
    if (options.seriesData[i].isBar) {
      if (options.seriesData[i].barColor instanceof Array && options.seriesData[i].barColor.length > 1) {
        BarColor = {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: options.seriesData[i].barColor[0] },
              { offset: 1, color: options.seriesData[i].barColor[1] }]),
            borderColor: options.seriesData[i].barColor ? options.seriesData[i].barColor : '#2e92cb',
            barBorderRadius: options.config.isBarRadius ? options.config.barWidth : 0,
            borderWidth: 0,
            shadowColor: 'transparent'
          }
        }
      } else if (options.seriesData[i].barColor instanceof Array && options.seriesData[i].barColor.length === 1) {
        BarColor = {
          normal: {
            color: options.seriesData[i].barColor ? options.seriesData[i].barColor[0] : '#2e92cb',
            borderColor: options.seriesData[i].barColor ? options.seriesData[i].barColor : '#2e92cb',
            barBorderRadius: options.config.isBarRadius ? options.config.barWidth : 0,
            borderWidth: 0,
            shadowColor: 'transparent'
          }
        }
      } else {
        BarColor = {
          normal: {
            color: options.seriesData[i].barColor ? options.seriesData[i].barColor : '#2e92cb',
            borderColor: options.seriesData[i].barColor ? options.seriesData[i].barColor : '#2e92cb',
            barBorderRadius: options.config.isBarRadius ? options.config.barWidth : 0,
            borderWidth: 0,
            shadowColor: 'transparent'
          }
        }
      }
      if (options.seriesData[i].colorIndex !== undefined) {
        BarColor = barColorArr[options.seriesData[i].colorIndex]
      }
      chart = {
        type: 'bar',
        stack: options.seriesData[i].stack ? options.seriesData[i].stack : null,
        name: options.seriesData[i].name ? options.seriesData[i].name : '',
        barWidth: options.config.barWidth ? options.config.barWidth : 10,
        data: options.seriesData[i].data,
        yAxisIndex: options.seriesData[i].yAxisIndex ? options.seriesData[i].yAxisIndex : 0,
        itemStyle: BarColor
      }
    } else {
      if (options.seriesData[i].areaIndex !== undefined) {
        areaColor = areaStyle[options.seriesData[i].areaIndex]
      } else {
        if (options.seriesData[i].areaColor instanceof Array && options.seriesData[i].areaColor.length > 1) {
          areaColor = {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: options.seriesData[i].areaColor[0] },
              { offset: 1, color: options.seriesData[i].areaColor[1] }], false),
            shadowColor: options.seriesData[i].shadowColor ? options.seriesData[i].shadowColor : 'transparent',
            shadowBlur: options.seriesData[i].shadowBlur ? options.seriesData[i].shadowBlur : 5
          }
        } else if (options.seriesData[i].areaColor instanceof Array && options.seriesData[i].areaColor.length === 1) {
          areaColor = {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: options.seriesData[i].areaColor[0] },
              { offset: 1, color: options.seriesData[i].areaColor[0] }], false),
            shadowColor: options.seriesData[i].shadowColor ? options.seriesData[i].shadowColor : 'transparent',
            shadowBlur: options.seriesData[i].shadowBlur ? options.seriesData[i].shadowBlur : 5
          }
        } else if (options.seriesData[i].areaColor) {
          areaColor = {
            color: options.seriesData[i].areaColor,
            shadowColor: options.seriesData[i].shadowColor ? options.seriesData[i].shadowColor : 'transparent',
            shadowBlur: options.seriesData[i].shadowBlur ? options.seriesData[i].shadowBlur : 5
          }
        } else {
          areaColor = {
            color: 'transparent',
            shadowColor: options.seriesData[i].shadowColor ? options.seriesData[i].shadowColor : 'transparent',
            shadowBlur: options.seriesData[i].shadowBlur ? options.seriesData[i].shadowBlur : 5
          }
        }
      }
      if (options.seriesData[i].colorIndex !== undefined) {
        itemColor = itemStyle[options.seriesData[i].colorIndex]
        lineColor = lineStyle[options.seriesData[i].colorIndex]
      } else {
        itemColor = {
          color: options.seriesData[i].itemColor ? options.seriesData[i].itemColor : '#fff',
          borderColor: options.seriesData[i].itemBorderColor ? options.seriesData[i].itemBorderColor : '#2e92cb',
          borderWidth: options.seriesData[i].itemWidth ? options.seriesData[i].itemWidth : 6
        }
        lineColor = {
          normal: {
            width: options.seriesData[i].lineWidth ? options.seriesData[i].lineWidth : 1,
            color: options.seriesData[i].lineColor ? options.seriesData[i].lineColor : '#2e92cb'
          }
        }
      }
      chart = {
        type: 'line',
        yAxisIndex: options.seriesData[i].yAxisIndex ? options.seriesData[i].yAxisIndex : 0,
        name: options.seriesData[i].name ? options.seriesData[i].name : '',
        data: options.seriesData[i].data,
        smooth: options.seriesData[i].smooth ? options.seriesData[i].smooth : false, // 是否平滑曲线显示。
        symbol: options.seriesData[i].symbol ? options.seriesData[i].symbol : 'circle',
        symbolSize: options.seriesData[i].symbolSize ? options.seriesData[i].symbolSize : 5,
        showSymbol: true, //  折线图的点要不要显示
        lineStyle: lineColor,
        itemStyle: itemColor,
        areaStyle: areaColor
      }
    }
    seriesArr.push(chart)
  })
  let echartOption = {
    title: title,
    legend: legend,
    dataZoom: dataZoom,
    tooltip: tooltip,
    xAxis: xAxis,
    yAxis: yAxis,
    grid: grid,
    series: seriesArr
  }
  return echartOption
}

// 饼状图
// options 为一个对象
// options.data[{value: 124, name: '其他'}] data[i].name为连线的显示,
// options.tipsArr[]
// options.labelLine
// options.seriesRadius = [['15%', '50%'], ['5%', '10%'], ['55%', '56%'], ['62%', '63%'], ['69%', '70%']]
// options.type 为'default'的时候，为圆环
// 主体， 内圆， 外圆虚线1，外圆虚线2， 外圆实线,饼状图的半径
export function getPieOption (options) {
  let option = null
  let arr = ['#e9e703', '#e8605e', '#19dc7c', '#319ced', '#fa9022', '#8c70f8', '#cadfea', '#f59233']
  if (options.dtottedLine || options.dtottedLine === undefined) {
    options.dtottedLine = true
  } else {
    options.dtottedLine = false
  }
  options.tooltipsUnit = options.tooltipsUnit === undefined ? '' : options.tooltipsUnit
  // options.dtottedLine = options.dtottedLine === undefined ? true : options.dtottedLine
  let dataArr = []
  if (options.labelShow === undefined) {
    options.labelShow = true
  }
  let defaultLabelLine = {
    normal: {
      show: options.labelShow,
      length: 50,
      length2: 20
    },
    emphasis: {
      show: options.labelShow
    }
  }
  let labelLine = _.cloneDeep(defaultLabelLine)
  mergeField(options.labelLine, labelLine)
  let seriesRadius = options.seriesRadius ? options.seriesRadius : [['15%', '50%'], ['5%', '10%'], ['55%', '56%'], ['62%', '63%'], ['69%', '70%']]
  for (let i = 0; i < options.data.length; i++) {
    if (options.data[i].value > 0) {
      dataArr.push({
        value: options.data[i].value,
        name: options.data[i].percent + '%',
        labelLine: labelLine,
        label: {
          normal: {
            show: options.labelShow,
            color: arr[i],
            fontSize: options.labelSize ? options.labelSize : 14,
            formatter: options.labelFormatter === '' ? '{b}' : options.labelFormatter
          }
        },
        stillShowZeroSum: false,
        itemStyle: {
          normal: {
            color: arr[i]
          }
        }
      })
    }
  }
  let series = []
  if (options.type === 'default') {
    series = [
      {
        name: '',
        type: 'pie',
        radius: seriesRadius[0],
        center: ['50%', '50%'],
        data: dataArr
      }
    ]
    if (options.dtottedLine) {
      series = [...series,
        {
          name: '',
          type: 'pie',
          radius: seriesRadius[1] ? seriesRadius[1] : ['22%', '24%'],
          center: ['50%', '50%'],
          silent: true,
          label: {
            normal: {
              show: false
            }
          },
          data: getLine({
            color: 'rgba(4,246,238,1)',
            length: 100,
            type: 5
          })
        },
        {
          name: '',
          type: 'pie',
          radius: seriesRadius[2] ? seriesRadius[2] : ['28%', '30%'],
          center: ['50%', '50%'],
          silent: true,
          label: {
            normal: {
              show: false
            }
          },
          data: getLine({
            color: 'rgba(142,252,255,1)',
            length: 60,
            type: 5
          })
        }]
    }
  } else {
    series = [
      {
        name: '',
        type: 'pie',
        roseType: 'radius',
        radius: seriesRadius[0],
        center: ['50%', '50%'],
        data: dataArr
      },
      {
        name: '内圆',
        type: 'pie',
        roseType: 'radius',
        silent: true,
        radius: seriesRadius[1],
        center: ['50%', '50%'],
        label: {
          normal: {
            show: false
          }
        },
        data: [
          {
            value: 100,
            itemStyle: {
              normal: {
                color: '#319ced'
              }
            }
          }
        ]
      },
      {
        name: '外圆',
        type: 'pie',
        roseType: 'radius',
        silent: true,
        radius: seriesRadius[2],
        center: ['50%', '50%'],
        label: {
          normal: {
            show: false
          }
        },
        data: getLine({
          color: 'rgba(14,102,203,0.3)'
        })
      },
      {
        name: '外圆',
        type: 'pie',
        roseType: 'radius',
        silent: true,
        radius: seriesRadius[3],
        center: ['50%', '50%'],
        label: {
          normal: {
            show: false
          }
        },
        data: getLine({
          color: 'rgba(14,102,203,0.6)'
        })
      },
      {
        name: '外圆',
        type: 'pie',
        roseType: 'radius',
        silent: true,
        radius: seriesRadius[4],
        center: ['50%', '50%'],
        label: {
          normal: {
            show: false
          }
        },
        data: [
          {
            value: 100,
            itemStyle: {
              normal: {
                color: '#319ced'
              }
            }
          }
        ]
      }
    ]
  }
  let tipsArr = []
  let colorArr = []
  for (let i = 0; i < options.tipsArr.length; i++) {
    if (options.isCanEmpty) {
      tipsArr.push(options.tipsArr[i])
      colorArr.push(arr[i])
    } else {
      if (Number(options.tipsArr[i].value) !== 0) {
        tipsArr.push(options.tipsArr[i])
        colorArr.push(arr[i])
      }
    }
  }
  option = {
    tooltip: {
      trigger: 'item',
      position: function (pos, params, dom, rect, size) {
        dom.style.border = '1px solid #1072e2'
        dom.style.backgroundColor = 'rgba(7, 23, 62, 0.8)'
        dom.style.padding = '10px 14px'
        let messageDom = ''
        if (Array.isArray(tipsArr[params.dataIndex])) {
          messageDom += '<span>其余类型</span><br/>'
          for (let i = 0; i < tipsArr[params.dataIndex].length; i++) {
            messageDom += '<span style="display: block; width: 100%; box-sizing: border-box;text-align: left;">' + tipsArr[params.dataIndex][i].name + ': <i style="color: ' + colorArr[params.dataIndex] + '">' + tipsArr[params.dataIndex][i].value + options.tooltipsUnit + '(' + tipsArr[params.dataIndex][i].percent + '%)</i></span>'
          }
        } else {
          messageDom = '<span style="display: block; width: 100%; box-sizing: border-box;text-align: left;">' + tipsArr[params.dataIndex].name + ': <i style="color: ' + colorArr[params.dataIndex] + '">' + tipsArr[params.dataIndex].value + options.tooltipsUnit + '(' + tipsArr[params.dataIndex].percent + '%)</i></span>'
        }
        dom.innerHTML = messageDom
        let lefts
        let tops
        if (pos[0] + dom.offsetWidth > size.viewSize[0]) {
          lefts = size.viewSize[0] - dom.offsetWidth
          if (lefts < 0) {
            lefts = 0
          }
        } else {
          lefts = pos[0]
        }
        if (pos[1] + dom.offsetHeight > size.viewSize[1]) {
          tops = size.viewSize[1] - dom.offsetHeight
        } else {
          tops = pos[1]
        }
        return { left: lefts, top: tops }
      }
    },
    grid: {
      shadowBlur: 50,
      shadowColor: '#fff',
      shadowOffsetX: 10,
      shadowOffsetY: 10
    },
    color: arr,
    series: series
  }
  return option
}

// 饼图内圆和外圆
// option.opacity 虚线透明度
// option.length虚线有多少段
// option.color虚线颜色
// option.type 2的时候，一个半有颜色，一半没颜色， 3的时候，是两个有颜色， 一个有颜色
export function getLine (option) {
  let arr = []
  option.length = option.length === undefined ? 120 : option.length
  option.type = option.type === undefined ? 2 : option.type
  for (let i = 0; i < option.length; i++) {
    if (i % option.type === 0) {
      arr.push(
        {
          value: 3,
          itemStyle: {
            normal: {
              color: 'transparent'
            }
          }
        })
    } else {
      arr.push(
        {
          value: 3,
          itemStyle: {
            normal: {
              color: option.color
            }
          }
        })
    }
  }
  return arr
}

// 默认字段与传入字段合并,把data1的数据合并入data2
export function mergeField (data1, data2) {
  // let data = _.cloneDeep(data2)
  for (let key in data1) {
    if (data1[key] !== undefined) {
      if (typeof (data1[key]) === 'object' && !(data1[key] instanceof Array)) {
        if (data2[key] === undefined) {
          data2[key] = {}
        }
        mergeField(data1[key], data2[key])
      } else {
        if (data1[key] !== undefined) {
          data2[key] = data1[key]
        }
      }
    }
  }
}

// 传化单位
export function conversion (params, type) {
  if (type === 'w') {
    let num = ''
    let str = (params / 10000).toFixed(2)
    if (params >= 10000) {
      if (parseInt(str.substr(-2)) === 0) {
        num = str.substr(0, str.length - 3)
      } else {
        num = str
      }
      return num + 'W'
    } else {
      return params
    }
  } else if (type === '%') {
    if (params === 0) {
      return 0
    } else {
      return params + ' %'
    }
  } else {
    return params
  }
}

// 坐标类目名字的长度
export function changeShowLength (value, length, xAxisNameLengthSymbol = '...') {
  let str = value
  if (value && value.length > length) {
    str = value.substring(0, length) + xAxisNameLengthSymbol
  }
  return str
}

// 仪表的option
// options.borderColor 底圈的颜色,为数组，数组第一位为渐变色的开始颜色，第二位是渐变色的结束颜色
// options.angle 百分比数据
// options.title 头部样式
// options.detail 百分比字体样式
export function getGaugeOption (options) {
  let borderColor = options.borderColor ? options.borderColor : ['#9e0e79', '#201233']
  options.radius = options.radius ? options.radius : '100%'
  // let lineRadius
  // if (options.radius.indexOf('%') > -1) {
  //   lineRadius = options.maxRadius * parseFloat(options.radius.replace('%', '') / 100)
  // } else {
  //   lineRadius = options.radius
  // }
  if (options.angle === undefined || options.angle === '') {
    options.angle = 0
  }
  const defaultTitle = {
    text: '',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 12,
      color: '#fff'
    },
    left: 'center',
    right: 'auto',
    bottom: 5
  }
  let title = _.cloneDeep(defaultTitle)
  mergeField(options.title, title)
  const defaultDetail = {
    borderColor: '#fff',
    shadowColor: '#fff', // 默认透明
    shadowBlur: 5,
    fontWeight: 'normal',
    offsetCenter: [0, 0], // x, y，单位px
    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
      fontWeight: 'bolder',
      color: '#fff',
      fontSize: 12
    },
    formatter: '{value}%'
  }
  let detail = _.cloneDeep(defaultDetail)
  mergeField(options.detail, detail)
  let option = {
    title: title,
    series: [
      {
        name: '底圈颜色',
        type: 'gauge',
        center: ['50%', '50%'], // 默认全局居中
        startAngle: 225,
        endAngle: -45,
        min: 0,
        max: 100,
        radius: options.radius, // 图表尺寸
        axisLine: {
          show: true,
          lineStyle: {
            width: 15,
            shadowBlur: 0,
            color: [
              [
                1,
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#036ac5'
                }, {
                  offset: 1,
                  color: '#011136'
                }])
              ]
            ]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          length: 12,
          lineStyle: {
            color: '#333'
          }
        },
        axisLabel: {
          show: false,
          distance: 5,
          textStyle: {
            color: '#000',
            fontSize: '12'
          },
          formatter: function (e) {
            switch (e + '') {
              case '0':
                return '0%'
              default:
                return e
            }
          }

        },
        pointer: { // 仪表盘指针
          show: false
        },
        detail: {
          show: false
        },
        data: [{
          name: '',
          value: 100
        }]
      },
      {
        name: '虚线',
        type: 'gauge',
        center: ['50%', '50%'], // 默认全局居中
        startAngle: 225,
        endAngle: -45,
        min: 0,
        max: 100,
        splitNumber: 12,
        radius: options.radius.indexOf('%') > -1 ? options.maxRadius * parseFloat(options.radius.replace('%', '') / 100) - 18 : options.radius - 18, // 图表尺寸
        axisLine: {
          show: false,
          lineStyle: {
            width: 0,
            shadowBlur: 0,
            color: '#036ac5'
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: '#1176eb',
            width: 10,
            borderColor: '#1176eb',
            type: 'solid',
            opacity: '1'
          },
          length: 30,
          splitNumber: 1
        },
        splitLine: {
          show: true,
          length: 1,
          lineStyle: {
            color: '#1176eb',
            width: 4
          }
        },
        axisLabel: {
          show: false,
          distance: 5,
          textStyle: {
            color: '#000',
            fontSize: '12'
          },
          formatter: function (e) {
            switch (e + '') {
              case '0':
                return '0%'
              default:
                return e
            }
          }

        },
        pointer: { // 仪表盘指针
          show: false
        },
        detail: {
          show: false
        },
        data: [{
          name: '',
          value: 100
        }]
      },
      {
        name: '实际的',
        type: 'gauge',
        center: ['50%', '50%'], // 默认全局居中
        startAngle: 225,
        endAngle: -45,
        min: 0,
        max: 100,
        radius: options.radius, // 图表尺寸
        axisLine: {
          show: false,
          lineStyle: {
            width: 15,
            shadowBlur: 0,
            color: [
              [
                options.angle / 100,
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: borderColor[0]
                }, {
                  offset: 1,
                  color: borderColor[1]
                }])
              ]
            ]
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: 'auto',
            width: 1
          },
          length: 8,
          splitNumber: 5
        },
        splitLine: {
          show: false,
          length: 12,
          lineStyle: {
            color: 'auto'
          }
        },
        axisLabel: {
          show: false
        },
        pointer: {
          // 仪表盘指针
          show: false,
          length: '70%',
          width: 2
        },
        detail: detail,
        title: {
          show: false
        },
        data: [{
          name: title,
          value: options.angle
        }]
      }
    ]
  }
  return option
}

// 双圆环
// options.color 双圆环的颜色数组，默认是['#ba0577', '#1ca7e1']
// options.data 双圆环数据
export function doubleRing (options) {
  let option
  let value1 = options.data[1]
  let value2 = options.data[0]
  let labelShow1 = false
  let labelShow2 = false
  let arrPie1 = []
  let arrPie2 = []
  if (!options.color) {
    options.color = ['#ba0577', '#1ca7e1']
  }
  if (value1 !== 0) {
    labelShow1 = true
  }
  arrPie1 = [
    {
      value: value1,
      name: value1 + '%',
      itemStyle: {
        normal: {
          color: options.color[0]
        }
      },
      label: {
        normal: {
          show: labelShow1,
          color: options.color[0]
        }
      },
      labelLine: {
        normal: {
          show: labelShow1,
          length: 10,
          length2: 5,
          lineStyle: {
            color: options.color[0]
          }
        }
      }
    },
    {
      value: 100 - value1,
      name: 100 - value1 + '%',
      itemStyle: {
        normal: {
          color: '#07356f'
        }
      },
      label: {
        normal: {
          show: false,
          color: 'transparent'
        }
      },
      labelLine: {
        normal: {
          show: false,
          lineStyle: {
            color: 'transparent',
            width: 0
          }
        }
      }
    }
  ]
  if (value2 !== 0) {
    labelShow2 = true
  }
  arrPie2 = [
    {
      value: value2,
      name: value2 + '%',
      itemStyle: {
        normal: {
          color: options.color[1]
        }
      },
      label: {
        normal: {
          show: labelShow2,
          color: options.color[1]
        }
      },
      labelLine: {
        normal: {
          show: labelShow2,
          length: 5,
          length2: 5,
          lineStyle: {
            color: options.color[1]
          }
        }
      }
    },
    {
      value: 100 - value2,
      name: 100 - value2 + '%',
      itemStyle: {
        normal: {
          color: '#07356f'
        }
      },
      label: {
        normal: {
          show: false,
          color: 'transparent'
        }
      },
      labelLine: {
        normal: {
          show: false,
          lineStyle: {
            color: 'transparent',
            width: 0
          }
        }
      }
    }
  ]
  option = {
    series: [
      {
        type: 'pie',
        hoverAnimation: false,
        z: 10,
        radius: ['20%', '30%'],
        center: ['50%', '50%'],
        clockwise: true,
        data: arrPie1
      },
      {
        type: 'pie',
        hoverAnimation: false,
        z: 1,
        center: ['50%', '50%'],
        radius: ['40%', '50%'],
        clockwise: false,
        data: arrPie2
      }
    ]
  }
  return option
}

// 单圆环
// options.color 双圆环的颜色数组，默认是['#ba0577']
export function singleRing (options) {
  let option
  let colorArr = [
    {
      type: 'linear',
      x: 0,
      y: 0.5,
      x2: 1,
      y2: 0.5,
      colorStops: [
        {
          offset: 0, color: 'rgba(59, 46, 212, 1)' // 0% 处的颜色
        },
        {
          offset: 1, color: 'rgba(28, 167, 225, 1)'// 100% 处的颜色
        }
      ],
      globalCoord: false
    },
    {
      type: 'linear',
      x: 0,
      y: 0.5,
      x2: 1,
      y2: 0.5,
      colorStops: [
        {
          offset: 0, color: 'rgba(230, 18, 169, 1)' // 0% 处的颜色
        },
        {
          offset: 1, color: 'rgba(253, 98, 208, 1)'// 100% 处的颜色
        }
      ],
      globalCoord: false
    },
    {
      type: 'linear',
      x: 0,
      y: 0.5,
      x2: 1,
      y2: 0.5,
      colorStops: [
        {
          offset: 0, color: 'rgba(176, 103, 30, 1)' // 0% 处的颜色
        },
        {
          offset: 1, color: 'rgba(227, 158, 80, 1)'// 100% 处的颜色
        }
      ],
      globalCoord: false
    }
  ]
  options.color = options.color ? options.color : colorArr[options.colorIndex]
  option = {
    series: [
      {
        type: 'pie',
        hoverAnimation: false,
        z: 10,
        startAngle: options.startAngle ? options.startAngle : -90,
        radius: options.radius ? options.radius : ['45%', '65%'],
        center: ['50%', '50%'],
        clockwise: true,
        data: [
          {
            value: options.data,
            name: options.data + '%',
            itemStyle: {
              normal: {
                color: options.color
              }
            },
            label: {
              normal: {
                show: true,
                position: 'center',
                fontSize: options.labelFontSize ? options.labelFontSize : 18,
                color: '#fff',
                fontWeight: options.labelFontWeight ? options.labelFontWeight : 'bold'
              },
              emphasis: {
                show: true,
                position: 'center'
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            }
          },
          {
            value: 100 - options.data,
            name: 100 - options.data + '%',
            itemStyle: {
              normal: {
                color: '#152663'
              }
            },
            label: {
              normal: {
                show: false,
                color: 'transparent'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false,
                lineStyle: {
                  color: 'transparent',
                  width: 0
                }
              },
              emphasis: {
                show: false
              }
            }
          }
        ]
      }
    ]
  }
  return option
}
